import { Button, message, Space } from "antd";
import { useComponentsStore } from "@/stores/edit-pages-store";
import { RollbackOutlined } from "@ant-design/icons";
import { savePage } from "@/interfaces";
import { useParams } from "react-router-dom";
import { GFS } from "@/hooks/useAssignGlobalProps";
export function Header() {
  const { schema, preview, setMode, setCurComponentId, popEditing, setPopEditing, setCurPopTarget, pages } = useComponentsStore();
  const {path} = useParams();
  async function saveSchema(){
    if(path){
      const page = pages.find(ele=> ele.path===path)
      if(page){
        const {id, label, path, icon} = page
        const res = await savePage({path, id, label, icon, schema: JSON.stringify(schema)})
        if([200, 201].includes(res.status)){
          GFS.message.success(res.data.message)
        }
      }else{
        GFS.message.warning('未找到该路径，是否已创建页面？')
      }
    }else{
      GFS.message.warning('url未找到path参数！')
    }
  }
  return (
    <div className="w-[100%] h-[100%]">
      <div className="h-[50px] flex justify-between items-center px-[20px]">
        <div>低代码编辑器 </div>
        <Space>
          {popEditing && !preview && (
            <Button
              title="返回页面编辑"
              icon={<RollbackOutlined />}
              iconPosition="end"
              onClick={() => {
                setPopEditing(false);
                setCurPopTarget(null);
                setCurComponentId(schema.id);
              }}
            >
              编辑主内容
            </Button>
          )}
          {!preview && (
            <>
              <Button onClick={saveSchema} > 保存 </Button>
              <Button onClick={() => { setMode(true); }} type="primary" > 预览 </Button>
            </>
          )}
          {preview && (
            <Button onClick={() => { setMode(false); }} type="primary" > 退出预览 </Button>
          )}
        </Space>
      </div>
    </div>
  );
}
